<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>PC</title>
</head>

<body>
    <canvas id="canvas" style="position: absolute; left: 0px; top: 0px" width="1920" height="1080"></canvas>
    <script language="JavaScript">
        //getQueryString
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }

        canClick = getQueryString("CanClick") == "true"

        // canvas
        var canvas = document.getElementById("canvas");
        var Resolution = "1920,1080"
        axios.get("/getinfo").then(response => {
            Resolution = response.data["Resolution"]
            canvas.width = Resolution.split(",")[0]
            canvas.height = Resolution.split(",")[1]
            console.log(Resolution)
        })

        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = "./screenshot?temp=" + Math.random();
        img.onload = () => {
            context.drawImage(img, 0, 0);
        };

        // click listener
        canvas.addEventListener("click", (clickEvent) => {
            // point
            point = {
                x: clickEvent.offsetX,
                y: clickEvent.offsetY
            }
            // draw
            if (canClick) {
                img.src = "./screenshot?type=click&clickX=" + point.x + "&clickY=" + point.y + "&random=" + Math.random();
            } else {
                img.src = "./screenshot?random=" + Math.random();
            }

            img.onload = () => {
                context.drawImage(img, 0, 0);
            };

        });

        // dbclick listener
        canvas.addEventListener('dblclick', (doubleClickEvent) => {
            // point
            point = {
                x: doubleClickEvent.offsetX,
                y: doubleClickEvent.offsetY
            }
            // draw
            if (canClick) {
                img.src = "./screenshot?type=dbclick&clickX=" + point.x + "&clickY=" + point.y + "&random=" + Math.random();
            } else {
                img.src = "./screenshot?random=" + Math.random();
            }

            img.onload = () => {
                context.drawImage(img, 0, 0);
            };

        }, false)

        // rclick listener
        canvas.addEventListener('contextmenu', (contextmenuEvent) => {
            // point
            point = {
                x: contextmenuEvent.offsetX,
                y: contextmenuEvent.offsetY
            }
            window.event.returnValue = false;
            // draw
            if (canClick) {
                img.src = "./screenshot?type=rclick&clickX=" + point.x + "&clickY=" + point.y + "&random=" + Math.random();
            } else {
                img.src = "./screenshot?random=" + Math.random();
            }

            img.onload = () => {
                context.drawImage(img, 0, 0);
            };

        }, false)

    </script>
</body>

</html>